<template>
	<view class="container">
		<view class="rate">
			<view class="rate-item">
				服务打分
				<uni-rate style="margin-left: 10rpx;"  size="30" margin="10" v-model="fuwu"></uni-rate>
			</view>
		</view>
		<view class="detail">
			<view style="font-size: 32rpx;font-weight: 600;">
				服务评价
			</view>
			<view class="meiti">
				<view @click="chooseserviceimage()" class="meiti-item">
					<image src="../../static/order/tupian.png"></image>
					<view>添加图片</view>
				</view>
				<view @click="chooseservicevideo()" class="meiti-item">
					<image src="../../static/order/shipin.png"></image>
					<view>添加视频</view>
				</view>
			</view>
			<view class="zhanshi">
				<view style="position: relative;" v-for="(item,index) in serviceimage" :key="index">
					<image :src="item"></image>
					<image @click="deleteserviceimage(index)" style="width: 40rpx;height: 40rpx;position: absolute;top:0rpx;right: 0rpx;" src="../../static/feed/delete.png"></image>
				</view>
			</view>
			<view class="zhanshi">
				<view style="position: relative;" v-for="(item,index) in servicevideo" :key="index">
					<video :src="item.tempFilePath"></video>
					<image @click="deleteservicevideo(index)" style="width: 40rpx;height: 40rpx;position: absolute;top:0rpx;right: 0rpx;" src="../../static/feed/delete.png"></image>
				</view>
			</view>
			<view class="content">
				<textarea :maxlength="-1" style="width: 100%;" placeholder="请对服务进行评价" v-model="service"></textarea>
			</view>
		</view>
		<view class="rate">
			<view class="rate-item">
				人员打分
				<uni-rate style="margin-left: 10rpx;"  size="30" margin="10" v-model="renyuan"></uni-rate>
			</view>
		</view>
		<view class="detail">
			<view style="font-size: 32rpx;font-weight: 600;">
				人员评价
			</view>
			<view class="meiti">
				<view @click="choosepeopleimage()" class="meiti-item">
					<image src="../../static/order/tupian.png"></image>
					<view>添加图片</view>
				</view>
				<view @click="choosepeoplevideo()" class="meiti-item">
					<image src="../../static/order/shipin.png"></image>
					<view>添加视频</view>
				</view>
			</view>
			<view class="zhanshi">
				<view style="position: relative;" v-for="(item,index) in peopleimage" :key="index">
					<image :src="item"></image>
					<image @click="deletepeopleimage(index)" style="width: 40rpx;height: 40rpx;position: absolute;top:0rpx;right: 0rpx;" src="../../static/feed/delete.png"></image>
				</view>
			</view>
			<view class="zhanshi">
				<view style="position: relative;" v-for="(item,index) in peoplevideo" :key="index">
					<video :src="item.tempFilePath"></video>
					<image @click="deletepeoplevideo(index)" style="width: 40rpx;height: 40rpx;position: absolute;top:0rpx;right: 0rpx;" src="../../static/feed/delete.png"></image>
				</view>
			</view>
			<view class="content">
				<textarea :maxlength="-1" style="width: 100%;" placeholder="请对服务人员进行评价" v-model="people"></textarea>
			</view>
		</view>
		<view style="width: 100%;height: 110rpx;"></view>
		<view class="bottom">
			<view @click="tijiao()" class="button">提交评价</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onBeforeMount} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import http from "@/utils/request.js"
	onBeforeMount(()=>{
		userinfo.value=uni.getStorageSync('userinfo')
	})
	onLoad((e)=>{
		service_id.value=e.service_id
		people_id.value=e.people_id
		order_id.value=e.order_id
	})

	let fuwu=ref(null)
	let renyuan=ref(null)
	let service=ref('')
	let service_id=ref('')
	let people_id=ref('')
	let order_id=ref('')
	let people=ref('')
	let userinfo=ref(null)
	let serviceimage=ref([])
	let servicevideo=ref([])
	let peopleimage=ref([])
	let peoplevideo=ref([])
	
	function chooseserviceimage(){
		uni.showLoading({
			title:'加载中',
		})
		uni.chooseImage({
			count:3,
			success(res){
				console.log(res)
				serviceimage.value=res.tempFilePaths
			},
			fail(err){
				console.log(err)
			},
			complete(){
				uni.hideLoading()
			}
		})
	}
	function chooseservicevideo(){
		uni.showLoading({
			title:'加载中',
		})
		uni.chooseMedia({
			count:3,
			success(res){
				console.log(res)
				servicevideo.value=res.tempFiles
			},
			fail(err){
				console.log(err)
			},
			complete(){
				uni.hideLoading()
			}
		})
	}
	function choosepeopleimage(){
		uni.showLoading({
			title:'加载中',
		})
		uni.chooseImage({
			count:3,
			success(res){
				console.log(res)
				peopleimage.value=res.tempFilePaths
			},
			fail(err){
				console.log(err)
			},
			complete(){
				uni.hideLoading()
			}
		})
	}
	function choosepeoplevideo(){
		uni.showLoading({
			title:'加载中',
		})
		uni.chooseMedia({
			count:3,
			success(res){
				console.log(res)
				peoplevideo.value=res.tempFiles
			},
			fail(err){
				console.log(err)
			},
			complete(){
				uni.hideLoading()
			}
		})
	}
	function deleteserviceimage(index){
		serviceimage.value.splice(index,1)
	}
	function deleteservicevideo(index){
		servicevideo.value.splice(index,1)
	}
	function deletepeopleimage(index){
		peopleimage.value.splice(index,1)
	}
	function deletepeoplevideo(index){
		peoplevideo.value.splice(index,1)
	}
	function shangchuan(file,type,index){
		return new Promise((resolve,reject)=>{
			uni.uploadFile({
				url:'http://localhost:82/api/images/upload',
				filePath:file,
				name:'file',
				header: { "Content-Type": "multipart/form-data" },
				formData:{
					'user':userinfo.value.user_id,
					'use':'pingjia'+type+index,
					'time':Date.now()
				},
				success(result){
					resolve(result)
				},
				fail(err){
					reject(err)
				}
			})
		})
	}
	
	async function tijiao() {  
	    try {  
	        // 上传图片 
			let imageUrls=[],imageUrls1=[],videoUrls=[],videoUrls1=[];
			if(serviceimage.value.length>0){
				const imagePromises = serviceimage.value.map((item, index) => shangchuan(item, 'image', index));
				const imageResults = await Promise.all(imagePromises);  
				imageUrls = imageResults.map(result => JSON.parse(result.data).imgUrl);
			}
			if(peopleimage.value.length>0){
				const imagePromises1 = peopleimage.value.map((item, index) => shangchuan(item, 'image', index));
				const imageResults1 = await Promise.all(imagePromises1);  
				imageUrls1 = imageResults1.map(result => JSON.parse(result.data).imgUrl); 
			}
	  
	        // 上传视频  
			if(servicevideo.value.length>0){
				const videoPromises = servicevideo.value.map((item, index) => shangchuan(item.tempFilePath, 'video', index));
				const videoResults = await Promise.all(videoPromises);  
				videoUrls = videoResults.map(result => JSON.parse(result.data).imgUrl);
			}
	         if(peoplevideo.value.length>0){
				 const videoPromises1 = peoplevideo.value.map((item, index) => shangchuan(item.tempFilePath, 'video', index));
				 const videoResults1 = await Promise.all(videoPromises1);  
				 videoUrls1 = videoResults1.map(result => JSON.parse(result.data).imgUrl); 
			 }
	        // 发送请求  
	        const resp = await http.post('/pingjia/addpingjia', {  
	            content: service.value,  
	            image1: imageUrls[0] || null,  // 使用 || null 处理可能不存在的元素  
	            image2: imageUrls[1] || null,  
	            image3: imageUrls[2] || null,  
	            video1: videoUrls[0] || null,  
	            video2: videoUrls[1] || null,  
	            video3: videoUrls[2] || null,  
	            follow_id: '0',  
	            rate: fuwu.value,  
	            type: 'service',
				service_id:service_id.value,
	            user_id: userinfo.value.user_id  
	        });
			const resp1 = await http.post('/pingjia/addpingjia', {
			    content: people.value,  
			    image1: imageUrls1[0] || null,  // 使用 || null 处理可能不存在的元素  
			    image2: imageUrls1[1] || null,  
			    image3: imageUrls1[2] || null,  
			    video1: videoUrls1[0] || null,  
			    video2: videoUrls1[1] || null,  
			    video3: videoUrls1[2] || null,  
			    follow_id: '0',  
			    rate: renyuan.value,  
			    type: 'people',
				people_id:people_id.value,
			    user_id: userinfo.value.user_id  
			});
			let changestatus=await http.post('/order/changestatus',{
				order_id:order_id.value,
				order_status:'7',
			})
	  
	        Promise.all([resp,resp1,changestatus]).then(res=>{
				console.log('评价成功')
				uni.showToast({
					title:'评价成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}) 
	  
	    } catch (error) {  
	        console.error('上传或提交过程中发生错误:', error);  
	    }  
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		
		.rate{
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			font-weight: 600;
			padding: 20rpx;
			
			&-item{
				width: 100%;
				display: flex;
				align-items: center;
				letter-spacing: 0.1em;
				
			}
		}
		
		.detail{
			width: 100%;
			background-color: #fff;
			margin-bottom: 10rpx;
			box-sizing: border-box;
			padding: 20rpx;
			
			.meiti{
				width: 100%;
				display: flex;
				border-bottom:2rpx solid #f2f2f2;
				padding: 20rpx 0;
				
				&-item{
					height: 250rpx;
					margin-right: 40rpx;
					width: 250rpx;
					display: flex;
					border: 4rpx dashed #9c9c9c;
					align-items: center;
					letter-spacing: 0.1em;
					justify-content: center;
					flex-direction: column;
					
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
			
			.zhanshi{
				display: flex;
				
				image,video{
					width: 150rpx;
					height: 200rpx;
					margin: 20rpx;
				}
			}
			
			.content{
				width: 100%;
				border-radius: 20rpx;
				background-color: #f6f6f6;
				box-sizing: border-box;
				padding: 20rpx 10rpx;
			}
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.button{
				background-color: #f8e177;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #090300;
				letter-spacing: 0.2em;
				width: 90%;
				height: 70%;
				border-radius: 50rpx;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
	}
</style>
